<style>
  .label {
    display: inline-block;
    margin: 10px 10px 0 0;

  }
</style>
<template>
  <div class="mod-config">
    <el-card class="box-card">
      <el-form :inline="true" :model="dataForm" label-width="70px" @keyup.enter.native="getDataList()">
        <el-row>
            <el-col :span="6">
              <el-form-item label="标题">
                <el-input v-model="title" placeholder="标题" clearable></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="客户昵称">
                <el-input v-model="fullName" placeholder="客户名称" clearable></el-input>
              </el-form-item>
            </el-col>    
            <el-col :span="6">
              <el-form-item label="品牌">
                 <el-select v-model="brandId" filterable placeholder="请选择" clearable>
                  <el-option
                    v-for="item in brandList"
                    :key="item.id"
                    :value="item.name">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="审核状态">
                <el-select v-model="statusId" placeholder="请选择" clearable>
                  <el-option
                    v-for="item in statusList"
                    :key="item.id"
                    :value="item.name">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="6">
              <el-form-item label="大类">
                 <el-select v-model="category1Id" v-on:change="category1Change" placeholder="请选择" clearable>
                  <el-option
                    v-for="item in category1List"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="小类">
                 <el-select v-model="category2Id" placeholder="请选择" clearable>
                  <el-option
                    v-for="item in category2List"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>    
            <el-col :span="12">
              <el-form-item label="发布时间">
                <el-date-picker
                  v-model="time"
                  type="daterange"
                  range-separator="至"
                  value-format="yyyy-MM-dd"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期">
                </el-date-picker>
              </el-form-item>
            </el-col>
          </el-row>
            
        <!-- <el-form-item>
          <el-input v-model="dataForm.key" placeholder="参数名" clearable></el-input>
        </el-form-item> -->
        <el-form-item>
          <!-- <div style="padding-top: 20px"> -->
            <el-button @click="getDataList('search')">查询</el-button>
          <!-- </div> -->
        </el-form-item>
      </el-form>
    </el-card>
    <el-table
      :data="dataList"
      border
      v-loading="dataListLoading"
      style="width: 100%;">
      <el-table-column
        prop="id"
        header-align="center"
        align="center"
        width = "50"
        label="序号">
      </el-table-column>
      <el-table-column
        prop="nickName"
        header-align="center"
        align="center"
        label="客户昵称">
      </el-table-column>
      <el-table-column
        prop="title"
        header-align="center"
        align="center"
        label="标题">
      </el-table-column>
      <el-table-column
        prop="brand"
        header-align="center"
        align="center"
        label="品牌">
      </el-table-column>
      <el-table-column
        prop="type"
        header-align="center"
        align="center"
        label="分类">
      </el-table-column>
      <el-table-column
        prop="sku"
        header-align="center"
        align="center"
        label="SKU">
      </el-table-column>
      <el-table-column
        prop="color"
        header-align="center"
        align="center"
        label="颜色">
      </el-table-column>
      <el-table-column
        prop="size"
        header-align="center"
        align="center"
        label="尺寸">
      </el-table-column>
      <el-table-column
        prop="sex"
        header-align="center"
        align="center"
        label="性别">
      </el-table-column>
      <el-table-column
        prop="publishTime"
        header-align="center"
        align="center"
        label="发布时间">
      </el-table-column>
      <el-table-column
        prop="quotesPrice"
        header-align="center"
        align="center"
        label="报价价格">
      </el-table-column>
      <!-- <el-table-column
        prop="quotesStatus"
        header-align="center"
        align="center"
        width = "120"
        label="报价状态">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.quotesStatus==0"
            type="primary"
            disable-transitions>待报价</el-tag>
          <el-tag v-else-if="scope.row.quotesStatus==1"
            type="warning"
            disable-transitions>报价中</el-tag>
          <el-tag v-else-if="scope.row.quotesStatus==2"
            type="success"
            disable-transitions>已确认</el-tag>
          <el-tag v-else="scope.row.quotesStatus==3"
            type="info"
            disable-transitions>报价失效</el-tag>
        </template>
      </el-table-column> -->
      <el-table-column
        prop="quotesDays"
        header-align="center"
        align="center"
        label="预计到货时间">
      </el-table-column>
      <el-table-column
        prop="fullName"
        header-align="center"
        align="center"
        label="报价买手昵称">
      </el-table-column>
      <!-- <el-table-column
        prop="deletedFlag"
        header-align="center"
        align="center"
        label="删除状态">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.deletedFlag==0"
              type="success"
              disable-transitions>未删除</el-tag>
          <el-tag v-else
              type="danger"
              disable-transitions>已删除</el-tag>
          </template>
      </el-table-column> -->
      <!-- <el-table-column
        prop="flag"
        header-align="center"
        align="center"
        width = "120"
        label="审核状态">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.flag==1"
            type="success"
            disable-transitions>已审核</el-tag>
          <el-tag v-else-if="scope.row.flag==0"
            type="primary"
            disable-transitions>未审核</el-tag>
          <el-tag v-else="scope.row.flag==2"
            type="danger"
            disable-transitions>审核失败</el-tag>
        </template>
      </el-table-column> -->
      <el-table-column
        prop="flag"
        header-align="center"
        align="center"
        label="状态">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.deletedFlag!=0"
            type="danger"
            disable-transitions>已删除</el-tag>
          <el-tag v-else-if="scope.row.flag==0"
            type="primary"
            disable-transitions>未审核</el-tag>
          <el-tag v-else-if="scope.row.flag==1&&scope.row.quotesStatus==0"
            type="primary"
            disable-transitions>待报价</el-tag>
          <el-tag v-else-if="scope.row.flag==1&&scope.row.quotesStatus==1"
            type="info"
            disable-transitions>报价中</el-tag>
          <el-tag v-else-if="scope.row.flag==1&&scope.row.quotesStatus==2"
            type="success"
            disable-transitions>已确认</el-tag>
          <el-tag v-else-if="scope.row.flag==1&&scope.row.quotesStatus==3"
            type="warning"
            disable-transitions>报价失效</el-tag>          
          <el-tag v-else="scope.row.flag==2"
            type="info"
            disable-transitions>审核失败</el-tag>
        </template>
      </el-table-column>
      <el-table-column
        fixed="right"
        header-align="center"
        align="center"
        label="操作">
        <!-- <template slot-scope="scope">
          <a v-if="scope.row.flag == 0" :href="'#/biz-orderdetail?orderNo='+scope.row.orderNo+'&state='+scope.row.state">审核</a>
        </template> -->
        <template slot-scope="scope">
          <el-button type="text"  v-if="scope.row.flag == 0&&scope.row.deletedFlag==0" size="small" @click="jumpToCheckPage(scope.row.id,'customerGoodCheck')">审核</el-button>
          <el-button type="text"  v-if="scope.row.deletedFlag==0&&scope.row.flag == 1&&(scope.row.quotesStatus == 0||scope.row.quotesStatus==3)" size="small" @click="jumpToCheckPage(scope.row.id,'customerGoodQuotes')">报价</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      @size-change="sizeChangeHandle"
      @current-change="currentChangeHandle"
      :current-page="pageIndex"
      :page-sizes="[10, 20, 50, 100]"
      :page-size="pageSize"
      :total="totalPage"
      layout="total, sizes, prev, pager, next, jumper">
    </el-pagination>
    <!-- 弹窗, 新增 / 修改 -->
    <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></add-or-update>
  </div>
</template>

<script>
  import AddOrUpdate from './publishCustomers-add-or-update'
  export default {
    data () {
      return {
        dataForm: {
          key: ''
        },
        dataList: [],
        pageIndex: 1,
        pageSize: 10,
        totalPage: 0,
        dataListLoading: false,
        dataListSelections: [],
        addOrUpdateVisible: false,


        title:"",
        fullName:"",
        time:[],
        brandId:"",
        categoryId:"",
        category1Id:"",
        category2Id:"",
        brandList:[],
        categoryList:[],
        category1List:[],
        category2List:[],
        statusId:"",
        statusList:[{
            "id":0,
            "name":"未审核"
        },{
            "id":1,
            "name":"已审核"
        }
        ],
      }
    },
    components: {
      AddOrUpdate
    },
    activated () {
      this.getDataList()
      this.$http({
          url: this.$http.adornUrl(`/biz/common/getBrands`),
          method: 'get',
          params: this.$http.adornParams()
      }).then(({data}) => {
          console.log(data);
          this.brandList = data.data;
      })
      this.$http({
          url: this.$http.adornUrl(`/biz/common/getCategories`),
          method: 'get',
          params: this.$http.adornParams()
      }).then(({data}) => {
          console.log(data);
          this.categoryList = data.data;
      })

      this.$http({
        url: this.$http.adornUrl(`/biz/categories/listNew`),
        method: "get",
        params: this.$http.adornParams()
      }).then(({ data }) => {
        this.category1List = data.categoryList;
      });
      
    },
    methods: {
      category1Change() {
        for (var i = 0; i < this.category1List.length; i++) {
          if (this.category1Id == this.category1List[i].id) {
            this.category2List = this.category1List[i].children;
            this.category2Id = '';
          }
        }
      },
      // 获取数据列表
      getDataList (val) {
        if(val == 'search'){
            this.pageIndex = 1;
        }

        var brandId = "";

        if(this.brandId){
            this.brandList.map(con => {
              if(this.brandId == con.name){
                brandId = con.id;
                return;
              } 
            });
        }
        

        var categoryId = "";
        /*if(this.categoryId){
            this.categoryList.map(con => {
              if(this.categoryId == con.name){
                categoryId = con.id;
                return;
              } 
            });
        }*/
        if (this.category2Id != "") {
          categoryId = this.category2Id;
        } else if (this.category1Id != "") {
          categoryId = this.category1Id;
        }


        var statusId = "";
        if(this.statusId){
            this.statusList.map(con => {
              if(this.statusId == con.name){
                statusId = con.id;
                return;
              } 
            });
        }

        this.dataListLoading = true
        this.$http({
          url: this.$http.adornUrl('/biz/publishCustomers/list'),
          method: 'get',
          params: this.$http.adornParams({
            'page': this.pageIndex,
            'limit': this.pageSize,
            'brandId': brandId,
            'categoryId': categoryId,
            'title': this.title,
            'fullName': this.fullName,
            'minDt':this.time!=undefined&&this.time.length == 2 ?this.time[0]:"",
            'maxDt':this.time!=undefined&&this.time.length == 2 ?this.time[1]:"",
            'flag':statusId
          })
        }).then(({data}) => {
          if (data && data.code === 0) {
            this.dataList = data.page.list
            this.totalPage = data.page.totalCount
          } else {
            this.dataList = []
            this.totalPage = 0
          }
          this.dataListLoading = false
        })
      },
      // 每页数
      sizeChangeHandle (val) {
        this.pageSize = val
        this.pageIndex = 1
        this.getDataList()
      },
      // 当前页
      currentChangeHandle (val) {
        this.pageIndex = val
        this.getDataList()
      },
      auditingFn(val){
        this.$confirm(`确定对[id=${val}]进行审核通过操作?`, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$http({
            url: this.$http.adornUrl(`/biz/publishCustomers/auth/${val}`),
            method: 'post',
            data: this.$http.adornParams()
          }).then(({data}) => {
            if (data && data.code === 0) {
              this.$message({
                message: '操作成功',
                type: 'success',
                duration: 1500,
                onClose: () => {
                  this.getDataList()
                }
              })
            } else {
              this.$message.error(data.msg)
            }
          })
        })
      },
      jumpToCheckPage(id,name) {
        let query = {id: id};
        this.$router.push({
            name: name,
            query: query
        });
      },
    }
  }
</script>
